<template>
  <div class="info-panel">
    <div>缩放级别: <span>{{ zoomLevel }}</span></div>
    <div>中心点: <span>{{ centerCoord }}</span></div>
    <div>图层状态: <span>{{ layerStatus }}</span></div>
    <div>点击要素: <span>{{ clickInfo }}</span></div>
    <!-- 添加测量信息显示 -->
    <div v-if="measureInfo">测量结果: <span>{{ measureInfo }}</span></div>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'InfoPanel',
  props: {
    zoomLevel: {
      type: String,
      default: '-'
    },
    centerCoord: {
      type: String,
      default: '-'
    },
    layerStatus: {
      type: String,
      default: '未加载'
    },
    clickInfo: {
      type: String,
      default: '无'
    },
    measureInfo: {
      type: String,
      default: ''
    }
  }
});
</script>

<style scoped>
.info-panel {
  position: absolute;
  bottom: 10px;
  left: 10px;
  z-index: 1000;
  background: white;
  padding: 10px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  font-size: 12px;
}
</style>